<template>
  <el-drawer
    title="选择文档"
    :append-to-body="true"
    :visible.sync="visibility"
    size="39%"
  >
    <div class="content-container">
      <el-form ref="listQuery" :inline="true" class="filter-container">
        <el-form-item label="文件等级">
          <el-select
            v-model="listQuery.documentLevel"
            clearable
            size="mini"
            @change="handleLevelChange"
          >
            <el-option
              v-for="documentLevel in levels"
              :key="documentLevel.value"
              :label="documentLevel.label"
              :value="documentLevel.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文件属性">
          <el-select v-model="listQuery.documentProperty" clearable size="mini">
            <el-option
              v-for="item in categories"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="getDataList"
          >
            搜索
          </el-button>
        </el-form-item>

        <el-scrollbar>
          <div>
            <el-table
              height="400"
              :data="
                DataList.filter(
                  (data) =>
                    !searchName ||
                    data.documentCode
                      .toLowerCase()
                      .includes(searchName.toLowerCase())
                )
              "
              highlight-current-row
              :row-class-name="tableRowClassName"
              style="width: 100%; overflow: scroll"
            >
              <el-table-column label="文件名称">
                <template slot-scope="scope">
                  <!-- <span
                  v-if="scope.row.folderName"
                  style="cursor: pointer"
                  @click="childFile(scope.row)"
                >
                  <svg class="icon" aria-hidden="true">
                    <use
                      :xlink:href="iconType(scope.row.fileExtension).class"
                    />
                  </svg>
                  {{ scope.row.folderName }}</span
                > -->
                  <span
                    v-if="scope.row.documentName"
                    style="cursor: pointer"
                    @click="openDocument(scope.row)"
                    ><svg class="icon" aria-hidden="true">
                      <use
                        :xlink:href="iconType(scope.row.fileExtension).class"
                      /></svg
                    >{{ scope.row.documentName }}{{ scope.row.fileExtension }}
                  </span>
                </template>
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="searchName"
                    size="mini"
                    placeholder="输入文件名称搜索"
                  />
                </template>
              </el-table-column>

              <el-table-column
                label="操作"
                align="center"
                width="70"
                fixed="right"
              >
                <template slot-scope="scope">
                  <!-- <el-button
                    class="my-but"
                    @click="deleteFileList(scope.row, scope.$index)"
                    ><i class="el-icon-remove-outline" />
                  </el-button> -->
                  <el-button
                    class="my-but"
                    @click="addFileList(scope.row, scope.$index)"
                    ><i class="el-icon-circle-plus-outline" />
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-scrollbar>
        <el-form-item label="选中文件">
          <el-tag
            v-for="(item, index) in checkedFileList"
            :key="index"
            closable
            @close="deleteFileList(item)"
            >{{ item.documentName }}</el-tag
          >
        </el-form-item>
        <br />
        <el-form-item>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
          <el-button @click="visibility = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { getRelease } from '@/api/xd/documentFlow'
import { listDictTreeItem } from '@/api/base/dict'
import { unity } from '@/styles/js/setIconType.js'
import { openDocument } from '@/utils/openCommon.js'

export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    immediate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      iconType: unity.setIconType,
      searchMode: 0,
      keywords: null,
      fuzzyFlag: true,
      temp: {
        goodsType: 1
      },
      selectedGoods: null,
      selectedGoodsBatch: null,
      levels: {},
      categories: {},
      listQuery: {},
      DataList: [],
      searchName: null,
      checkedFileList: []
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value) {
        this.searchMode = 0
        this.keywords = null
        this.fuzzyFlag = true
        // this.reset()
      }
    },
    searchName(data) {}
  },
  mounted() {
    this.loadLevelOptions()
    this.getList()
  },
  methods: {
    // 获取文件等级属性
    loadLevelOptions() {
      listDictTreeItem({ dictGroupCode: 'document_category' }).then((res) => {
        this.levels = res.data
      })
    },
    // 搜索
    getDataList() {
      getRelease(this.listQuery).then((res) => {
        this.DataList = res.data
        this.listLoading = false
      })
    },
    handleLevelChange(val) {
      if (this.listQuery.documentProperty) {
        this.listQuery.documentProperty = ''
      }
      for (let i = 0, len = this.levels.length; i < len; i++) {
        if (this.levels[i].value === val) {
          this.categories = this.levels[i].children
          if (this.listQuery.type) {
            this.listQuery.type = ''
          }
        }
      }
    },
    getList() {
      this.temp.repositoryId = this.$route.params.repositoryId
      if (this.$route.query.parentFolderId) {
        this.temp.parentFolderId = this.$route.query.parentFolderId
      }
      getRelease(this.temp).then((res) => {
        this.DataList = Array.from(res.data || [])
        this.listLoading = false
      })
      if (this.$route.query.repositoryName) {
        this.repositoryName = this.$route.query.repositoryName
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.flowType === 4) {
        return 'success-row'
      } else {
        return ''
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    openDocument(row) {
      openDocument(row)
    },
    handleConfirm() {
      this.visibility = false
      this.$emit('success', this.checkedFileList)
    },
    handleCloseDialog() {},
    addFileList(row) {
      const arr = this.checkedFileList || []
      arr.push(row)
      const set = new Set(arr)
      this.checkedFileList = Array.from(set)
    },
    deleteFileList(tag) {
      this.checkedFileList.splice(this.checkedFileList.indexOf(tag), 1)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

